<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { CircleCloseFilled, Plus } from '@element-plus/icons-vue'
import type { Imenu } from '@/types/menu'
import http from '../../api/http'
import { IMenus } from '@/types/system'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<Imenu>({
     menuId:0,
    menuName:'',
    icon:'el-icon-s-custom',
    parentId:0,
    url:'',
    lastTime:new Date()
})
const menuS:any=reactive([{id:0,name:"一级菜单"},
                {id:1,name:"二级菜单"}
])
var menu=reactive([])
var kg=ref(false)
var jb=ref(0)
var UpdateMenu=reactive([])



//表单验证
const rules = reactive<FormRules<Imenu>>({
    menuName: [
        { required: true, message: '请输入菜单姓名!', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在2-10个字符之间!', trigger: 'blur' },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {

        if (valid) {
            //axios 提交后台

            http.put('Menus', ruleForm).then(res => {
                if (res.code == '1') {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    dialogVisible.value = false
                    emit('refresh')
                }
                else {
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }

            }).catch(err => {
                console.log('err: ', err);
            })


            //关闭弹窗 并刷新列表页面数据
            dialogVisible.value = false
            emit('refresh')
        } else {
            console.log('error submit!', fields)
        }
    })
}

//#region  父子组件之间双向绑定数据 数据传递
// 父子组件之间双向绑定数据 数据传递
const dialogVisible = defineModel<boolean>({required:true})
const emit = defineEmits<{ (e: 'refresh'): void }>()
const props = defineProps<{ formData: IMenus }>()
//监听key 的改变 并查询数据
watch(() => props.formData, (value: IMenus) => {
    //切断数据关联
    let data: IMenus = JSON.parse(JSON.stringify(value))
                       if(data.parentId==0){
   
    jb.value=0;
     kg.value=false
  }else{
   
jb.value=1;
    kg.value=true
  }

    //form 赋值
    ruleForm.menuId = data.menuId;
    ruleForm.menuName = data.menuName;
    ruleForm.url = data.url;;
    ruleForm.icon = data.icon;
    ruleForm.lastTime =new Date();
    ruleForm.parentId=data.parentId
})
watch(()=>jb.value,(value)=>{

      //修改数据的值
     
     if(value==1){
          ruleForm.parentId=UpdateMenu[0].menuId;
          kg.value=true;
        }else{
        UpdateMenu=menu.filter(n=>n.parentId==0)
            ruleForm.parentId=UpdateMenu[0].menuId;
            ruleForm.parentId=0;
            kg.value=false;
        }   
})





onMounted(() => {
  
  http.getList<Imenu>('Menus')
        .then(res => {
           menu.push(...res.data)
           UpdateMenu.push(...res.data)
     
        }).catch(err => {
            console.log('err: ', err);
        })
})

</script>

<template>

    <el-dialog v-model="dialogVisible" :show-close="false" width="500" center>
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass"></h4>
                <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                    </el-icon>
                    关闭
                </el-button>
            </div>
        </template>
             <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
             <el-form-item label="菜单级别" >
               <el-select v-model=jb >
      <el-option v-for="(item,index) in menuS" :key="index" :label="item.name" :value="item.id"></el-option>
     
    </el-select>

            </el-form-item>
             <el-form-item label="菜单名称" prop="menuName">
    <el-input v-model="ruleForm.menuName"></el-input>
  </el-form-item>
  <el-form-item label="地址" prop="url" v-if="kg">
    <el-input v-model="ruleForm.url"></el-input>
  </el-form-item>
  <el-form-item label="菜单父级" prop="parentId" v-if="kg">
  <el-select  placeholder="请选择菜单父级" v-model="ruleForm.parentId">
      <el-option v-for="(item,index) in UpdateMenu" :key="index" :label="item.menuName" :value="item.menuId" ></el-option>
    </el-select>
</el-form-item>
<el-form-item label="图标地址" prop="icon">
    <el-input v-model="ruleForm.icon"></el-input>
  </el-form-item>
        </el-form>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>


<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
}

.avatar {
    width: 128px;
    height: 128px;
    display: block;
}
</style>